<template>
	<view :style="{
		'background-color': pageConf.background
	}"
	:class="[formItem.config.class, formItem.configH5['noStyle'] && 'noStyle']">
		<template v-if="!formItem.configH5['noStyle']">
			<template v-if="formItem.config.model == 'appModel3'">
				<view class="recode-title-content flex-center">
					<view class="title-txt"
					:style="{
						'font-family': setAttr('title', 'fontFamily'),
						'font-size': pxToRpx(setAttr('title', 'fontSize')),
						'color': setAttr('title', 'color'),
					}">已有{{ total || '0' }}人购买</view>
				</view>
				<view class="recode-content" :style="{
					'background-color': setAttr('formItem', 'backgroundColor'),
					'border-radius': pxToRpx(setAttr('formItem', 'borderRadius')),
				}">
					<view class="record-header flex-normal" 
						:style="{
							'font-family': setAttr('tableTitle', 'fontFamily'),
							'font-size': pxToRpx(setAttr('tableTitle', 'fontSize')),
							'color': setAttr('tableTitle', 'color'),
						}">
						<view class="col">车牌号码</view>
						<view class="col">卡券状态</view>
						<view class="col">购买时间</view>
					</view>
					<view class="list"
						:style="{
							'font-family': setAttr('tableCol', 'fontFamily'),
							'font-size': pxToRpx(setAttr('tableCol', 'fontSize')),
							'color': setAttr('tableCol', 'color'),
						}">
						<view class="" v-if="orderList.length">
							<view class="record-row flex-normal" v-for="(row) in orderList" :key="row.id">
								<view class="col">{{row.clientPlateNumber | maskLastFour}}</view>
								<view class="col">已领取</view>
								<view class="col">{{row.createTime}}</view>
							</view>
						</view>
						<view v-else class="no-content flex-center">空空如也~</view>
					</view>
				</view>
			</template>
			<template v-if="formItem.config['model'] == 'appModel5'">
				<view class="recode-title-content flex-between">
					<view class="title-txt flex-center"
					:style="{
						'font-family': setAttr('title', 'fontFamily'),
						'font-size': pxToRpx(setAttr('title', 'fontSize')),
						'color': setAttr('title', 'color'),
					}">已有{{ total || '0' }}人购买</view>
					<text class="title-bg"></text>
				</view>
				<view class="recode-content">
					<view class="record-header flex-normal" 
						:style="{
							'font-family': setAttr('tableTitle', 'fontFamily'),
							'font-size': pxToRpx(setAttr('tableTitle', 'fontSize')),
							'color': setAttr('tableTitle', 'color'),
						}">
						<text class="col">车牌号码</text>
						<text class="col">卡券状态</text>
						<text class="col">购买时间</text>
					</view>
					<view class="list" 
						:style="{
							'font-family': setAttr('tableCol', 'fontFamily'),
							'font-size': pxToRpx(setAttr('tableCol', 'fontSize')),
							'color': setAttr('tableCol', 'color'),
						}">
						<view class="list-content" v-if="orderList.length">
							<view class="record-row flex-normal" v-for="(row) in orderList" :key="row.id">
								<text class="col">{{row.clientPlateNumber | maskLastFour}}</text>
								<text class="col">已领取</text>
								<text class="col">{{row.createTime}}</text>
							</view>
						</view>
						<view v-else class="no-content flex-center">空空如也~</view>
					</view>
				</view>
			</template>
		</template>
		<template v-else>
			<view class="nostyle-content"
				:style="{
					'background': `url(${formItem.configH5['imageUrl']}) no-repeat center`
				}">
				<template v-if="formItem.config.model == 'appModel3'">
					<view class="recode-content">
						<view class="record-header flex-normal" 
							:style="{
								'font-family': setAttr('tableTitle', 'fontFamily'),
								'font-size': pxToRpx(setAttr('tableTitle', 'fontSize')),
								'color': setAttr('tableTitle', 'color'),
							}">
							<view class="col">车牌号码</view>
							<view class="col">卡券状态</view>
							<view class="col">购买时间</view>
						</view>
						<view class="list"
							:style="{
								'font-family': setAttr('tableCol', 'fontFamily'),
								'font-size': pxToRpx(setAttr('tableCol', 'fontSize')),
								'color': setAttr('tableCol', 'color'),
							}">
							<view class="" v-if="orderList.length">
								<view class="record-row flex-normal" v-for="(row) in orderList" :key="row.id">
									<view class="col">{{row.clientPlateNumber | maskLastFour}}</view>
									<view class="col">已领取</view>
									<view class="col">{{row.createTime}}</view>
								</view>
							</view>
							<view v-else class="no-content flex-center">空空如也~</view>
						</view>
					</view>
				</template>
				<template v-if="formItem.config['model'] == 'appModel5'">
					<view class="recode-content">
						<view class="record-header flex-normal" 
							:style="{
								'font-family': setAttr('tableTitle', 'fontFamily'),
								'font-size': pxToRpx(setAttr('tableTitle', 'fontSize')),
								'color': setAttr('tableTitle', 'color'),
							}">
							<text class="col">车牌号码</text>
							<text class="col">卡券状态</text>
							<text class="col">购买时间</text>
						</view>
						<view class="list" 
							:style="{
								'font-family': setAttr('tableCol', 'fontFamily'),
								'font-size': pxToRpx(setAttr('tableCol', 'fontSize')),
								'color': setAttr('tableCol', 'color'),
							}">
							<view class="list-content" v-if="orderList.length">
								<view class="record-row flex-normal" v-for="(row) in orderList" :key="row.id">
									<text class="col">{{row.clientPlateNumber | maskLastFour}}</text>
									<text class="col">已领取</text>
									<text class="col">{{row.createTime}}</text>
								</view>
							</view>
							<view v-else class="no-content flex-center">空空如也~</view>
						</view>
					</view>
				</template>
			</view>
		</template>
	</view>
</template>

<script>
	import { getOrderList } from '@/api/hd/index.js'
	import {pxToRpx} from './tools.js'
	export default {
		props: {
			formItem:{
				type: Object,
				default: {}
			},
			pageConf: {
				type: Object,
				default: {}
			}
			
		},
		filters: {
			maskLastFour(str) {
			  return str.length <= 4 ? '****' : str.slice(0, -4) + '****'
			}
		},
		data(){
			return {
				routeParams: {},
				orderList: [],
				total: 0
			}
		},
		mounted(){
			this.routeParams = uni.getStorageSync('icar-wxActive')
			this.getOrderList()
		},
		methods: {
			pxToRpx: pxToRpx,
			setAttr(configKey, valKey){
				let _self = this
				if(configKey == 'formItem'){
					return _self.formItem['configH5'][valKey]
				}else{
					if(!_self.formItem[configKey]) return
					return _self.formItem[configKey]['configH5'][valKey]
				}				
			},
			getOrderList(){
				let _self = this
				if(!_self.routeParams['a']) return
				getOrderList(_self.routeParams['a'], {pageSize: 5, pageNum: 1}).then(res => {
					_self.orderList = res.rows
					_self.total = res.total
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// px 转为 rpx 的函数
	@function rem($px) {
	  @return $px * 1rpx;
	}
	.app-model-3, .app-model-5{
		margin: 0 !important;
		padding: 0 rem(30);
		padding-bottom: 0 !important;
	}
	.app-model-3.record-model{
		position: relative;
		padding-top: rem(50);
		.no-content{
			height: rem(300);
		}
		.recode-title-content{
			width: rem(503);
			height: rem(89);
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			background: url('/static/image/app-model-3/recode-title-bg.png') no-repeat center;
			background-size: contain;
		}
		.recode-content{
			padding: rem(30);
			.record-header{
				padding: rem(30) 0;        
			}
			.record-row{
				margin-bottom: rem(30);
				&:last-child{
					margin-bottom: 0;
				}
			}
			.col{
				width: 33.3%;
				text-align: center;
			}
		}
	}
  .app-model-5.record-model{
    position: relative;
    background: linear-gradient(180deg, #46A3E2, #2372BD);
    border-radius: rem(20);
    margin-bottom: rem(30);
    .no-content{
      height: rem(300);
    }
    .recode-title-content{
      .title-txt{
        background: linear-gradient(180deg, #EBFAFE, #D1EEFE);
        opacity: 0.93;
        height: rem(74);
        font-weight: bold;
        padding: 0 rem(30);
        border-radius: 0 0 rem(20) 0;
      }
      .title-bg{
        height: rem(30);
        width: rem(170);
        background: url('/static/image/app-model-5/record-title-bg.png') no-repeat center;
        background-size: contain;
        margin-right: rem(30);
      }
    }
    .recode-content{
      padding: rem(30);
      .record-header{
        padding: rem(30) 0;        
      }
      .record-row{
        margin-bottom: rem(30);
        &:last-child{
          margin-bottom: 0;
        }
      }
      .col{
        width: 33.3%;
        text-align: center;
      }
    }
  }
	.app-model-3.record-model.noStyle, .app-model-5.record-model.noStyle{
	    background: transparent;
	    background-size: cover;
	    padding-bottom: 0;
	    .nostyle-content{
	      background: transparent;
	      background-size: cover;
	    }
	  }
</style>